<template>
	<div class="confirm" style="background: #fff;">
		<!--<div class="header">
			<div class="back-icon iconfont" @click="goBack">
				&#xe624;
			</div>
			<div class="title">开通{{moduleName}}</div>
		</div>-->
		<div class="model_styles">
			<div v-html="content"></div>
		</div>
		<div class="split"></div>
		
		<!--<img-show></img-show>-->
		
		<div class="confirm-btn" @click="handleOpen">开通{{moduleName}}</div>
	</div>
</template>

<script type="text/javascript">
	import ImgShow from './common/imgShow'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	export default{
		name : 'openConfirm',
		data(){
			return{
				moduleName : '',
				content    : ''
			}
		},
		methods:{
			goBack(){
				this.$router.go(-1)
			},
			getPageInfo(){
				let id = this.$route.params.id
				this.$axiosGet('/api/moduleaaa/getContent?id=' + id).then( res => {
					this.moduleName = res.module_name
					this.content 	= res.content
				})
			},
			handleOpen(){
				let openInfo = {
					module_id       : this.$route.params.id,
					status 	        : 1,
					user_product_id : getUrlParam('user_product_id') || '',
					userinfo : {
						token : getUrlParam('token') || '',
						uid   : getUrlParam('uid')   || ''
					}
				}
				this.$axiosPost('/api/moduleaaa/useredit',{
					data : JSON.stringify(openInfo)
				}).then( res => {
					if(res.status === 1){
						this.$vux.toast.text(res.msg || '添加模块成功', 'top')
						this.$router.push('/openFunction')
					}else if(res.status === 0){
						this.$vux.toast.text(res.msg || '添加模块失败', 'top')
					}
				})
			}
		},
		mounted(){
			this.getPageInfo()
		},
		components:{
			ImgShow
		}
	}
</script>
<style lang="less" scoped>
	#textCenter{
		margin-top:.5rem;
		padding:0 .38rem;
		text-align:left;
	}
	#title{
		padding-left: .1rem;
		height:.4rem;
		border-left:.1rem solid #ff1351;
		font-size:.32rem;
	}
	.top-bar{
		height: .54rem;
		background: #ff1351;
	}
	.header{
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		height:1.44rem;
		line-height: 2rem;
		color:#fff;
		background:#ff1351;
		font-size:.34rem;		
		.back-icon{
			position: absolute;
			left: 0;
			top: .54rem;
			height: .9rem;
			padding:0 .2rem;
			line-height: .9rem;
		}
	}
	.function-desc{		
		#textCenter;
		margin-top: 1.44rem;
		padding-top: .2rem;
		.desc-title{
			#title;
		}
		.desc-text{
			padding-left: .2rem;
			margin-top: .4rem;
			margin-bottom: .25rem;
			line-height: .5rem;
			color: #797979;
		}
	}
	.split{
		height: .22rem;
		background:#eee;
	}
	.function-advantage{
		#textCenter;	
		.desc-title{
			#title;
		}	
		.advantage-item{
			margin-top: .35rem;
			margin-bottom: .25rem;
			.item-title{
				margin-bottom: .2rem;
				height: .46rem;
				display: flex;
				padding: 0 .2rem;
				.squear{
					margin-top: .1rem;
					height: .2rem;
					width: .2rem;
					border-radius: 50%;
					background: #ff1351;
				}
				.item-title-text{
					flex: 1;
					line-height: .46rem;
					padding-left: .1rem;
					font-size: .26rem;
				}
			}
			.item-text{
				padding-left:.45rem;
			}
		}
	}

	.confirm-btn{
		z-index: 999;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1.25rem;
		background: #ff1351;
		font-size: .4rem;
		text-align: center;
		line-height: 1.25rem;
		color: #fff;
	}
</style>
<style lang="less" >
	#textCenter{
		margin-top:.5rem;
		padding:0 .38rem;
		text-align:left;
	}
	#title{
		padding-left: .1rem;
		height:.4rem;
		border-left:.1rem solid #ff1351;
		font-size:.32rem;
	}
	#textCenter{
		margin-top:.5rem;
		padding:0 .38rem;
		text-align:left;
	}
	#title{
		padding-left: .1rem;
		height:.4rem;
		border-left:.1rem solid #ff1351;
		font-size:.32rem;
	}
	.model_styles{
		@f-color:#5e5e5e;
	    width: 100%;
	    overflow-x: hidden;
	    text-align: left;
	    padding: 0.2rem;
	    padding-bottom: 1.5rem;
	    line-height: 1.6;
	    
		h2{
		    border-left: .1rem solid #ff1351;
	        padding-left: .2rem;
	        font-weight: 100;
    		font-size: 0.30rem;
	        margin: 0.2rem 0 0.2rem 0.1rem;
		}
		p{
		    padding: 0 0.15rem;
			color: @f-color;
			line-height: 1.8;
	    
		}
		ul{
		    padding: 10px;
		    color: @f-color;
			li{
				padding-left: 20px;
    			position: relative;
				&:before {
				    content: " ";
				    width: 10px;
				    height: 10px;
				    position: absolute;
				    background: #ff1351;
				    border-radius: 50%;
				    left: 4px;
				    top: 4px;
				}
			}
		}

		hr {
		    background: #efeff4;
		    border: none;
		    height: 10px;
		    margin: 0.2rem -0.2rem;

		}
		img{max-width: 100%;}
	}
	
</style>